/**
 * K线图
 */
import React  from 'react'
import style from './index.less'
import moment from 'moment'
import {IECharts} from '../../../../components'

const KCharts=({
	data,
	point
})=>{

	
	const colors=['#00da3c','#ec0000']

	const markPointData=[]
	const timeArr=[]


	const dayNum=5,timesArr=[]
	point.map((item,i)=>{
			if(item.openTime>100000000){
				timesArr[2*i]=moment(item.openTime,'x').format('YYYYMMDD')*1
				timesArr[2*i+1]=moment(item.closeTime,'x').format('YYYYMMDD')*1
			}else{
				timesArr[2*i]=moment(item.openTime).format('YYYYMMDD')*1
				timesArr[2*i+1]=moment(item.closeTime).format('YYYYMMDD')*1
			}
	})
	timesArr.sort((a,b)=>a-b)

	const diff=moment(timesArr[timesArr.length-1],'YYYYMMDD').diff(moment(timesArr[0],'YYYYMMDD'), 'days')+1
	point.map((item, i) => {

		const { tradeType, buyPrice, sellPrice, openTime, closeTime } = item


		const openTimeStr = moment(openTime).format(diff>=dayNum?'YYYY-MM-DD':'YYYY-MM-DD HH:mm');
		const closeTimeStr = moment(closeTime).format(diff>=dayNum?'YYYY-MM-DD':'YYYY-MM-DD HH:mm');		


		if (tradeType === 'Buy') {
			markPointData.push({
				name: i + 'Buy',
				coord: [openTimeStr, buyPrice],
				value: buyPrice,
				itemStyle: {
					normal: { color: 'rgba(180, 0, 0, 0.6)' },
				},
				label: {
					normal: {
						formatter: value => '买',
					},
				},
			}, {
				name: i,
				coord: [closeTimeStr, sellPrice],
				value: sellPrice,
				itemStyle: {
					normal: { color: 'rgba(0, 180, 0, 0.6)' },
				},
				label: {
					normal: {
						formatter: value => '卖',
					},
				},
			},
			);
		} else {
			markPointData.push({
				name: i,
				coord: [openTimeStr, sellPrice],
				value: sellPrice,
				itemStyle: {
					normal: { color: 'rgba(0, 180, 0, 0.6)' },
				},
				label: {
					normal: {
						formatter: value => '卖',
					},
				},
			}, {
					name: i,
					coord: [closeTimeStr, buyPrice],
					value: buyPrice,
					itemStyle: {
						normal: { color: 'rgba(180, 0, 0, 0.6)' },
					},
					label: {
						normal: {
							formatter: value => '买',
						},
					},
				},
			);
		}
	})
console.log('111111111',markPointData)

	// timeArr.sort(function(a,b){return a-b});
	// const openTime1 = timeArr[0];
	// const closeTime1 = timeArr[timeArr.length-1];


	const dates=data.map((item,i)=>{
		const hh=parseInt(moment(item[0],'YYYYMMDDHHmmss').format('HH'))
		return moment(item[0],'YYYYMMDDHHmmss').format(hh>0?'YYYY-MM-DD HH:mm':'YYYY-MM-DD')
	})
	const myProps={
		option : {
				color:colors,
				backgroundColor: '#fff',
				animation: false,
				tooltip: {
						trigger: 'axis',
						axisPointer: {
								type: 'cross'
						},
						backgroundColor: 'rgba(245, 245, 245, 0.8)',
						borderWidth: 1,
						borderColor: '#ccc',
						padding: 10,
						textStyle: {
								color: '#000'
						}
				},
				grid: [
						{
								left: '15%',
								right: '5%',
								top:'10%',
								height: '50%'
						},
						{
								left: '15%',
								right: '5%',
								top: '70%',
								height: '12%'
						}
				],
				xAxis: [{
					type: 'category',
					data: dates,
					boundaryGap: false,
					axisLine: { lineStyle: { color: '#777' } },
					axisLabel: {
						formatter: value => {
							let text = ''
							let values = value.split(' ');
							text = values.length === 2 ? `${values[0]}\n${values[1]}` : value;
							return text;
						},
						lineHeight: 10,
						fontSize: 10,
					},
					min: 'dataMin',
					max: 'dataMax',
					axisPointer: {
						show: true,
					},
				}, {
					type: 'category',
					gridIndex: 1,
					data: dates,
					scale: true,
					boundaryGap: false,
					splitLine: { show: false },
					axisLabel: { show: false },
					axisTick: { show: false },
					axisLine: { lineStyle: { color: '#777' } },
					splitNumber: 20,
					min: 'dataMin',
					max: 'dataMax',
				}],
				axisPointer: {
					link: { xAxisIndex: 'all' },
					label: {
						backgroundColor: '#777',
					},
				},
				yAxis: [
						{
								scale: true
						},
						{
								scale: true,
								gridIndex: 1,
								splitNumber: 2,
								axisLabel: {show: false},
								axisLine: {show: false},
								axisTick: {show: false},
								splitLine: {show: false}
						}
				],
				dataZoom: [
						{
								type: 'inside',
								xAxisIndex: [0, 1],
								start: 0,
								end: 100
						},
						{
								show: true,
								xAxisIndex: [0, 1],
								type: 'slider',
								top: '85%',
								start: 0,
								end: 100
						}
				],
				series: [
						{
								name: 'K线图',
								type: 'candlestick',
								data: data.map((item,i)=>[item[1],item[2],item[3],item[4]]),
								itemStyle: {
										normal: {
												color: 'rgba(180, 0, 0, 1)',
												color0: 'rgba(0, 180, 0, 1)',
												borderColor: null,
												borderColor0: null
										}
								},
								markPoint: {
									data: markPointData
								},

						},
						{
								name: 'Volume',
								type: 'bar',
								xAxisIndex: 1,
								yAxisIndex: 1,
								data: data.map((item,i)=>item[2]-item[1]>=0?[i,item[5],1]:[i,item[5],-1]),
								itemStyle: {
										normal: {
											color: (p)=>p.value[2]>0?'rgba(180, 0, 0, 1)':'rgba(0, 180, 0, 1)'

										}
									}
						}
				]
		}
	}
  return(
    <div  className={`chart`} style={{height:400}}>
      <IECharts {...myProps} resizable={true}/>
    </div>
  )
}

KCharts.propTypes={
	// data
}

export default KCharts
